<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>基础表单元素</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="../../plugin/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../plugin/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../../plugin/Ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="../../adminlte/css/AdminLTE.min.css">
  <link rel="stylesheet" href="../../adminlte/css/skins/all-skins.min.css">
  <link rel="stylesheet" href="../../system/css/common.css">
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body class="hold-transition gray-bg sidebar-mini">
<div class="wrapper">
  <section class="content">
    <div class="row">
      <div class="col-md-6">
        <div class="box box-primary">
          <div class="box-header with-border">
            <h3 class="box-title">快速示例</h3>
          </div>
          <form role="form">
            <div class="box-body">
              <div class="form-group">
                <label for="exampleInputEmail1">邮箱地址</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱地址">
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">用户密码</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
              </div>
              <div class="form-group">
                <label for="exampleInputFile">文件上传</label>
                <input type="file" id="exampleInputFile">
                <p class="help-block">示例块级帮助文本.</p>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox"> 选中我
                </label>
              </div>
            </div>
            <div class="box-footer">
              <button type="submit" class="btn btn-primary">提交</button>
            </div>
          </form>
        </div>

        <div class="box box-success">
          <div class="box-header with-border">
            <h3 class="box-title">不同高度输入框</h3>
          </div>
          <div class="box-body">
            <input class="form-control input-lg" type="text" placeholder=".input-lg">
            <br>
            <input class="form-control" type="text" placeholder="Default input">
            <br>
            <input class="form-control input-sm" type="text" placeholder=".input-sm">
          </div>
        </div>

        <div class="box box-danger">
          <div class="box-header with-border">
            <h3 class="box-title">不同宽度输入框</h3>
          </div>
          <div class="box-body">
            <div class="row">
				<div class="col-xs-3">
					<input type="text" class="form-control" placeholder=".col-xs-3">
				</div>
				<div class="col-xs-4">
					<input type="text" class="form-control" placeholder=".col-xs-4">
				</div>
				<div class="col-xs-5">
					<input type="text" class="form-control" placeholder=".col-xs-5">
				</div>
            </div>
          </div>
        </div>

        <div class="box box-info">
          <div class="box-header with-border">
            <h3 class="box-title">带标识输入框</h3>
          </div>
          <div class="box-body">
            <div class="input-group">
				<span class="input-group-addon">@</span>
				<input type="text" class="form-control" placeholder="用户名">
            </div>
            <br>

            <div class="input-group">
				<input type="text" class="form-control">
				<span class="input-group-addon">.00</span>
            </div>
            <br>

            <div class="input-group">
				<span class="input-group-addon">$</span>
				<input type="text" class="form-control">
				<span class="input-group-addon">.00</span>
            </div>

            <h4>带icons输入框</h4>
            <div class="input-group">
				<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
				<input type="email" class="form-control" placeholder="邮箱">
            </div>
            <br>

            <div class="input-group">
				<input type="text" class="form-control">
				<span class="input-group-addon"><i class="fa fa-check"></i></span>
            </div>
            <br>

            <div class="input-group">
				<span class="input-group-addon"><i class="fa fa-dollar"></i></span>
				<input type="text" class="form-control">
				<span class="input-group-addon"><i class="fa fa-ambulance"></i></span>
            </div>

            <h4>带复选框或单选框输入框</h4>
            <div class="row">
              <div class="col-lg-6">
                <div class="input-group">
					<span class="input-group-addon">
                        <input type="checkbox">
					</span>
                  <input type="text" class="form-control">
                </div>
              </div>
              <div class="col-lg-6">
                <div class="input-group">
					<span class="input-group-addon">
						<input type="radio">
					</span>
                  <input type="text" class="form-control">
                </div>
              </div>
            </div>

            <h4>带按钮输入框</h4>
            <p class="margin">大号: <code>.input-group.input-group-lg</code></p>
            <div class="input-group input-group-lg">
              <div class="input-group-btn">
                <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">下拉
                  <span class="fa fa-caret-down"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">提交</a></li>
                  <li><a href="#">再次提交</a></li>
                  <li><a href="#">其他</a></li>
                  <li class="divider"></li>
                  <li><a href="#">分割线</a></li>
                </ul>
              </div>
              <input type="text" class="form-control">
            </div>
			
            <p class="margin">常规</p>
            <div class="input-group">
              <div class="input-group-btn">
                <button type="button" class="btn btn-danger">提交</button>
              </div>
              <input type="text" class="form-control">
            </div>

            <p class="margin">小号 <code>.input-group.input-group-sm</code></p>
            <div class="input-group input-group-sm">
				<input type="text" class="form-control">
				<span class="input-group-btn">
					<button type="button" class="btn btn-info btn-flat">提交</button>
				</span>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="box box-info">
          <div class="box-header with-border">
            <h3 class="box-title">水平排列表单</h3>
          </div>
          <form class="form-horizontal">
            <div class="box-body">
              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">邮箱账号</label>
                <div class="col-sm-10">
                  <input type="email" class="form-control" id="inputEmail3" placeholder="请输入邮箱号">
                </div>
              </div>
              <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">用户密码</label>
                <div class="col-sm-10">
                  <input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox"> 记住我
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <div class="box-footer">
              <button type="submit" class="btn btn-default">取消</button>
              <button type="submit" class="btn btn-info pull-right">登录</button>
            </div>
          </form>
        </div>

        <div class="box box-warning">
          <div class="box-header with-border">
            <h3 class="box-title">常规元素</h3>
          </div>
          <div class="box-body">
            <form role="form">
              <div class="form-group">
                <label>文本框</label>
                <input type="text" class="form-control" placeholder="请输入内容">
              </div>
              <div class="form-group">
                <label>文本框禁用</label>
                <input type="text" class="form-control" placeholder="请输入内容" disabled>
              </div>

              <div class="form-group">
                <label>文本域</label>
                <textarea class="form-control" rows="3" placeholder="请输入内容"></textarea>
              </div>
              <div class="form-group">
                <label>文本域禁用</label>
                <textarea class="form-control" rows="3" placeholder="请输入内容" disabled></textarea>
              </div>

              <div class="form-group has-success">
                <label class="control-label" for="inputSuccess"><i class="fa fa-check"></i> 成功状态文本框</label>
                <input type="text" class="form-control" id="inputSuccess" placeholder="请输入内容">
                <span class="help-block">成功提示信息</span>
              </div>
              <div class="form-group has-warning">
                <label class="control-label" for="inputWarning"><i class="fa fa-bell-o"></i> 警告状态文本框</label>
                <input type="text" class="form-control" id="inputWarning" placeholder="请输入内容">
                <span class="help-block">警告提示信息</span>
              </div>
              <div class="form-group has-error">
                <label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> 错误状态文本框</label>
                <input type="text" class="form-control" id="inputError" placeholder="请输入内容">
                <span class="help-block">错误提示信息</span>
              </div>

              <div class="form-group">
                <div class="checkbox">
                  <label>
                    <input type="checkbox">
                    选项 1
                  </label>
                </div>

                <div class="checkbox">
                  <label>
                    <input type="checkbox">
                    选项 2
                  </label>
                </div>

                <div class="checkbox">
                  <label>
                    <input type="checkbox" disabled>
                    禁用选项
                  </label>
                </div>
              </div>

              <div class="form-group">
                <div class="radio">
                  <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                    选项 1
                  </label>
                </div>
                <div class="radio">
                  <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                    选项 2
                  </label>
                </div>
                <div class="radio">
                  <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
                    禁用选项
                  </label>
                </div>
              </div>

              <div class="form-group">
                <label>下拉框</label>
                <select class="form-control">
                  <option>选项 1</option>
                  <option>选项 2</option>
                  <option>选项 3</option>
                  <option>选项 4</option>
                  <option>选项 5</option>
                </select>
              </div>
              <div class="form-group">
                <label>禁用下拉框</label>
                <select class="form-control" disabled>
                  <option>选项 1</option>
                  <option>选项 2</option>
                  <option>选项 3</option>
                  <option>选项 4</option>
                  <option>选项 5</option>
                </select>
              </div>

              <div class="form-group">
                <label>多选下拉框</label>
                <select multiple class="form-control">
                  <option>选项 1</option>
                  <option>选项 2</option>
                  <option>选项 3</option>
                  <option>选项 4</option>
                  <option>选项 5</option>
                </select>
              </div>
              <div class="form-group">
                <label>禁用多选下拉框</label>
                <select multiple class="form-control" disabled>
                  <option>选项 1</option>
                  <option>选项 2</option>
                  <option>选项 3</option>
                  <option>选项 4</option>
                  <option>选项 5</option>
                </select>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>
  <div class="control-sidebar-bg"></div>
</div>

<script src="../../plugin/jquery/jquery.min.js"></script>
<script src="../../plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="../../plugin/fastclick/fastclick.js"></script>
<script src="../../adminlte/js/adminlte.min.js"></script>
</body>
</html>
